<!--  input 单行输入框 - 属性面板 -->
<template>
  <div class="inputAttr">
    <div class="content">
      <div class="title">
        {{ attributeset.lab }}
      </div>
      <div v-if="attributeset.data" class="list">
        <div class="lab">字段标题：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.title"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="lab">占位文案：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.placeholder"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">表单宽度：</div>
          <div class="slider">
            <t-slider v-model="attributeset.data.width" size="small" />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">表单列数</div>
          <div>
            <t-radio-group
              v-model="attributeset.data.defaultWidth"
              default-value="1"
              size="small"
              @change="widthChange"
            >
              <t-radio-button value="1">一列</t-radio-button>
              <t-radio-button value="2">两列</t-radio-button>
              <t-radio-button value="3">三列</t-radio-button>
              <t-radio-button value="4">四列</t-radio-button>
            </t-radio-group>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">最少输入：</div>
          <div>
            <t-input
              v-model="attributeset.data.minLength"
              type="text"
              size="small"
              placeholder="请输入长度"
            />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">最多输入：</div>
          <div>
            <t-input
              v-model="attributeset.data.maxLength"
              type="text"
              size="small"
              placeholder="请输入长度"
            />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否只读</div>
          <div><t-switch v-model="attributeset.data.isReadOnly" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">列表显示</div>
          <div><t-switch v-model="attributeset.data.listDisplay" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">列表搜索</div>
          <div><t-switch v-model="attributeset.data.searchDisplay" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">搜索类型</div>
          <div>
            <t-select v-model="attributeset.data.searchType" size="small">
              <t-option
                v-for="item in SEARCH_TYPE"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </t-select>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">显示标题</div>
          <div><t-switch v-model="attributeset.data.isShowTitle" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">输入统计</div>
          <div><t-switch v-model="attributeset.data.isStatistics" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否必填</div>
          <div><t-switch v-model="attributeset.data.isMust" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">唯一值</div>
          <div><t-switch v-model="attributeset.data.isOnly" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">反馈类型</div>
          <div>
            <t-select
              v-model="attributeset.data.inputType"
              size="small"
              @change="inputHandle"
            >
              <t-option
                v-for="item in options"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </t-select>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">默认值</div>
          <div>
            <t-input
              v-model="attributeset.data.defaultValue"
              type="text"
              size="small"
              :maxlength="Number(attributeset.data.maxLength)"
              placeholder="请输入默认值"
              @input="inputHandle"
            />
            <span v-if="!ruleResult" class="errorPrompt">
              {{ attributeset.data.errorPrompt || '请输入正确的值' }}
            </span>
          </div>
        </div>
        <div
          v-show="
            attributeset.data.inputType != 'none' &&
            attributeset.data.inputType != ''
          "
          class="fx-sb fx-al-ct pt-rt"
        >
          <div class="lab">效验提示</div>
          <div>
            <t-input
              v-model="attributeset.data.errorPrompt"
              type="text"
              size="small"
              placeholder="请输入正确的值"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { SEARCH_TYPE } from '@/constants'

const props = defineProps({
  arrtData: Object
})

let attributeset = reactive({ ...props.arrtData })

const options = ref([
  {
    key: 'none',
    value: '无效验'
  },
  {
    key: 'number',
    value: '数字'
  },
  {
    key: 'int',
    value: '整数'
  },
  {
    key: 'float',
    value: '小数'
  },
  {
    key: 'url',
    value: 'URL地址'
  },
  {
    key: 'emil',
    value: '邮箱地址'
  },
  {
    key: 'phone',
    value: '手机号'
  },
  {
    id: 'idNumber',
    value: '身份证号'
  }
])
// 处理列的调整宽度
const widthChange = (val) => {
  switch (val) {
    case '1':
      attributeset.data.width = 100
      break
    case '2':
      attributeset.data.width = 50
      break
    case '3':
      attributeset.data.width = 33.3
      break
    case '4':
      attributeset.data.width = 25
      break
  }
}

// 数字效验 包含 正数 负数 小数
const numberRule = /^-?\d+(\.\d+)?$/
// 整数类型 包含正、负整数和0
const intRule = /^-?\d+$/
// 浮点数类型 不包含正、负整数类型和0
const floatRule = /^-?(?!0)\d+(\.\d+)?$/
// url
const urlRule =
  /^(?:https?:\/\/)?(?:www\.)?[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(?:\/[\w-]*)*\/?$/
// emil 邮箱
const emilRule = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
// 手机号效验
const phoneRule = /^1[3|4|5|6|7|8|9]\\d{9}$/
// 身份证
const idNumberRule18 =
  /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
const idNumberRule15 =
  /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

// input 效验
// 效验结果
const ruleResult = ref(true)
const inputHandle = () => {
  ruleResult.value = true
  const value = attributeset.data.defaultValue
  if (value !== '' && value.length < attributeset.data.minLength) {
    ruleResult.value = false
    return false
  }
  if (value === '' && !attributeset.data.isMust) {
    return false
  }
  switch (attributeset.data.inputType) {
    case 'number':
      ruleResult.value = numberRule.test(value)
      break
    case 'int':
      ruleResult.value = intRule.test(value)
      break
    case 'float':
      ruleResult.value = floatRule.test(value)
      break
    case 'url':
      ruleResult.value = urlRule.test(value)
      break
    case 'emil':
      ruleResult.value = emilRule.test(value)
      break
    case 'phone':
      ruleResult.value = phoneRule.test(value)
      break
    case 'idNumber':
      ruleResult.value =
        idNumberRule18.test(value) || idNumberRule15.test(value)
      break
    default:
      ruleResult.value = true
  }
}
// 接收父级的方法
const emit: Function = defineEmits(['changeAttrHandle'])
// 同步调整attributeset
watch(
  () => props.arrtData,
  (val) => {
    attributeset = { ...val }
  },
  { deep: true }
)
// 监听整个表单的输入
watch(
  () => attributeset,
  (val) => {
    emit('changeAttrHandle', val)
  },
  { deep: true }
)
</script>
<style src="../../index.less" scoped></style>
